<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
</head>
<body>

<input type="text" placeholder="好汉，请留下你的名字" id="nickname"/>
<input type="button" value="上线" onclick="CHAT.connect1()"/>

<div>发送消息:</div>
<input type="text" placeholder="请输入发送内容" id="msgContent"/>
<input type="button" value="点我发送" onclick="CHAT.chat()"/>

<div>接受消息：</div>
<div id="receiveMsg" style="background-color: gainsboro;"></div>

<script type="application/javascript">

    window.CHAT = {
        socket: null,
        init: function () {
            if (window.WebSocket) {
                CHAT.socket = new WebSocket("ws://localhost:9985");
                CHAT.socket.onopen = function () {
                    console.log("连接建立成功...");
                },
                    CHAT.socket.onclose = function () {
                        console.log("连接关闭...");
                    },
                    CHAT.socket.onerror = function () {
                        console.log("发生错误...");
                    },
                    CHAT.socket.onmessage = function (e) {
                        console.log("接受到消息：" + e.data);
                        var receiveMsg = document.getElementById("receiveMsg");
                        var html = receiveMsg.innerHTML;
                        receiveMsg.innerHTML = html + "<br/>" + e.data;
                    }
            } else {
                alert("浏览器不支持websocket协议...");
            }
        },
        chat: function () {
            var msg = document.getElementById("msgContent");
            CHAT.socket.send(msg.value);
        },
        connect1: function () {
            var nickname = document.getElementById("nickname");
            var object = new Object();
            object.nickname = nickname.value;
            object.code = 1001;
            var json_str = JSON.stringify(object)

            CHAT.socket.send(json_str);
        }
    };

    //CHAT.init();

</script>
</body>
</html>